<template>
  <div class="my-tabs">
    <el-tabs v-model="tabVal" @tab-click="handleTab" v-bind="$attrs">
      <template v-for="(item, index) in tabsData" :key="item.label">
        <el-tab-pane v-if="!item.hidden" :label="item.label" :name="index">
          <slot :name="item.value" :tabItem="item"></slot>
        </el-tab-pane>
        <el-tab-pane v-else :name="index">
          <slot :name="item.value" :tabItem="item"></slot>
        </el-tab-pane>
      </template>
      <slot></slot>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { number } from '@intlify/core-base';

const props = defineProps({
  tabsData: {
    type: Array as any,
    default: [],
    required: true
  },
  modelValue: {
    type: Number,
    default: 0,
    required: true
  },
})

const tabVal = ref(0)
const emit = defineEmits(['update:modelValue'])

function handleTab(item: any) {
  emit('update:modelValue', item.paneName)
}

watch(
  () => props.modelValue,
  (val: number) => {
    tabVal.value = val
  },
  {
    deep: true,
    immediate: true,
  }
);


</script>
